<script setup>

</script>

<template>
<div class="recommend">
  <div class="top">
    <span class="left-text">店铺推荐</span>
    <span class="right-text">更多店铺》》</span>
  </div>
  <div class="under1-list">
   <ul>
     <li>
       <div class="list-left">
         <div class="list-left-img">
           <img src="@/assets/images/banner2.jpg" alt="">
         </div>
         <div class="list-left-title">
         <div class="list-left-titlename">
           <h4>盲人按摩</h4>
           </div>
         <div class="list-left-main">
           <p>专业按摩，推拿，刮痧</p>
         </div>
</div>
       </div>
       <div class="list-right">
         <div class="list-right-img">
           <img src="@/assets/images/banner3.jpg" alt="">
           </div>
         <div class="list-right-title">
           <div class="list-right-titlename">
             <h4>盲人按摩</h4>
           </div>
           <div class="list-right-main">
             <p>专业按摩，推拿，刮痧</p>
           </div>

</div>
       </div>


     </li>
   </ul>
  </div>
</div>
</template>

<style scoped>
.recommend {
  width: 100%;
  display: block;

}
.top{
  width: 1400px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  font-size: 21px;
  color: #7ebdf4;
}
.under1-list ul li{
  display: flex;
  padding: 10px;
  margin-bottom: 10px;
}
.list-left{
  flex: 1;
  display: flex;

}
.list-right{
  flex: 1;
  display: flex;
  border-left: 1px solid;
}
.list-left-img img{

  height: 250px;
  padding-left: 50px;

}
.list-left-title{

  margin-left: 10px;
  flex-direction: column
}
.list-right-img img {

  height: 250px;
}
.list-right-title{

  margin-left: 10px;
  flex-direction: column
}
.list-right-img img {

  height: 250px;
  padding-left: 50px;
}


</style>